<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="../css/lndex.css">
    <link rel="stylesheet" href="../css/information.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3418409_b08iye0h79l.css">
    <script src="../js/axios.min.js"></script>
</head>

<body>
    <div class="nav-big">
        <div class="nav-small">
            <a href="../index.html"><div class="nav-logo"></div></a>
            <div class="nav-sub">商城</div>
            <div class="nav-icon"></div>
            <div class="nav-mainsite"><a href="https://www.bilibili.com/"
                    style="text-decoration: none; color: #636c7b;">主站</a></div>
            <div class="nav-search">
                <input type="text" name="" id="" placeholder="活动、嘉宾、场馆" name class="nav-search-text">
                <div class="search-icon"></div>
            </div>
            <div class="nav-regis-login">
                <div class="nav-login"><a href="../html/register.html">注册</a>
                </div>
                <div class="nav-login-middle"></div>
                <div class="nav-register"><a href="../html/login.html"
                        style="text-decoration: none; color:#6c637b">登录</a></div>
            </div>
            <div class="nav-cart">
                <div class="nav-cartIcon"></div>
                <div class="nav-cart-center"><a href="../html/cart.html"
                        style="text-decoration: none;  color:#6c637b">订单中心</a></div>
            </div>
        </div>
    </div>
    <div class="product-information" id="pinformation">

    </div>

    <div class="footer" style="margin-top: 50px;">
        <div class="footer-wrp">
            <div class="border"></div>
            <div class="footer-text">
                <ul class="text-ul">
                    <li class="liclass">
                        <div class="tips">bilibili</div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">关于我们</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">友情链接</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">哔哩哔哩周边</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">官方认证</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">购买须知</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">客服中心</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">联系我们</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">加入我们</a>
                        </div>
                    </li>
                    <li class="liclass">
                        <div class="tips">传送门</div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">帮助中心</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">高级弹幕</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">活动专题页</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">侵权申诉</a>
                        </div>
                        <div class="cards">
                            <a href="https://www.bilibili.com/html/aboutUs.html" target="_blank">活动中心</a>
                        </div>
                    </li>
                    <li class="liclass">
                        <div class="li-right">
                            <div class="phone">
                                <div class="phone-img1"></div>
                                <em>手机端下载</em>
                            </div>
                            <div class="phone">
                                <div class="phone-img2"></div>
                                <em>新浪微博</em>
                            </div>
                            <div class="phone">
                                <div class="phone-img3"></div>
                                <em>官方微信</em>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="partner">
                    <div class="partner-img">
                        <div class="partner-banner"></div>
                    </div>
                </div>
                <img src="../会员购/images/QQ图片20220521162722.png" style="margin-top:20px;" alt="">
            </div>
        </div>
    </div>
    <script>
        console.log(location.search);
        var obj = new URLSearchParams(location.search);
        console.log(obj);
        var pid = obj.get("id");
        console.log(pid);
        let url = "http://jx.xuzhixiang.top/ap/api/detail.php";
        axios.get(url, { params: { id: pid } }).then((r) => {
            console.log(r.data);
            var pObj = r.data.data;
            console.log(pObj);
            var str = "";
            str = `     
            <div class="ifm-main" id="a${pObj.pid}">
                <div class="ifm-main-top">
                商品详情:
            </div>
            <div class="ifm-main-product">
                <div class="ifm-img" style="background-image: url(${pObj.pimg});"></div>
                <div class="main-pdt-ifm">
                    <div class="product-name">
                        <span class="name-title">${pObj.pname}</span>
                    </div>
                    <div class="product-time">
                        <div class="product-time-title">时间：</div>
                        <div class="product-time-time">2022.07.15 10:00 - 07.17 17:00</div>
                    </div>
                    <div class="product-place">
                        <div class="product-place-title">场馆：</div>
                        <div class="product-place-main">
                            <div class="place-name">中原国际博览中心</div>
                            <div class="address-name">郑汴路106号</div>
                            <div class="iconfont icon-didian" id="address"></div>
                            <div class="check-map">查看地图</div>
                        </div>
                    </div>
                    <div class="product-shwo">
                        <ul class="product-section">
                            <li class="product-section-title">场次：</li>
                            <li>
                                <div class="product-section-time" style="color: #f25d8e;border: 1px solid #f25d8e;box-shadow: inset 0 0 0 1px #f25d8e;">7月15日</div>
                                <div class="product-section-time">7月15日</div>
                                <div class="product-section-time">7月15日</div>
                            </li>
                        </ul>
                        <ul class="product-price">
                            <li class="product-price-title">价格：</li>
                            <div class="product-price-num">${pObj.pprice}</div>
                        </ul>
                        <ul class="product-number">
                            <li class="product-price-title">数量：</li>
                             <input type="number" id="pnum" onchange="change()" value="1">
                        </ul>
                    </div>
                    <div class="explain">
                        <div class="explain1">
                            <span>电子票/兑换票·无需配送</span>
                        </div>
                        <div class="explain2">
                            <span>不支持7天无理由退票</span>
                        </div>
                    </div>
                    <div class="product-buy">
                        <div onclick="addCartHandle()">立即购票</div>
                    </div>
                </div>
            </div>
        </div>
                    `+ str;
            document.querySelector("#pinformation").innerHTML = str;
        });
        function addCartHandle() {
            console.log("点击了加入购物车");
            let uid = localStorage.getItem("id");
            let pnum = document.querySelector("#pnum").value;
            let url = "http://jx.xuzhixiang.top/ap/api/add-product.php";
            axios
                .get(url, {
                    params: {
                        uid,
                        pid,
                        pnum,
                    },
                })
                .then((r) => {
                    //加入购物车成功
                    console.log(r.data);
                   alert("加入购物车成功");
                   location.href="../index.html";
                });
        }

    </script>
</body>

</html>